<template>
	<view>
		
		<view class="page" >
		
		    <view :style="{height:statustop+'px'}"></view>
			
			<view class="jiaonang">
				<text @tap="gohome" class="icon-fanhui iconfont" ></text>
				<view class="headmenu">
				    注册
				</view>
			</view>
		
		
		
		    <view class="headbox">
		
		        <view class="headbox_1">您好,</view>
		        <view class="headbox_2">欢迎注册</view>
		
		    </view>
		
		
		    <view class="loginbox">
		        <view style="height: 80rpx;"></view>
		
		        <view class="loginbox_1">
		
		            <view class="loginbox_1_t" >请输入手机号</view> 
		
		            <view class="loginbox_2_t">
		                <input type="number"  @input="getmobile" placeholder="请输入电话号码" maxlength="11" />
		            </view> 
		
		        </view>
		        
		
		        <view class="loginbox_1">
		
		            <view class="loginbox_1_t">请输入验证码</view> 
		
		            <view class="loginbox_2_b">
		                <input type="number" @input="getcode" placeholder="请输入验证码" maxlength="6" />
		
		                <view class="yzm" @tap="getsms" >{{yzmcode}}</view>
		            </view> 
		
		
		        </view>
		
		        <view class="loginbtn" @tap="submits" >立即提交 </view>
		
		
		    </view>
		
		
		    <view class="goreg" @tap="goregin" >
		        没有账户 <text>立即登录</text>
		    </view>
		
		</view>
		
		

	</view>
</template>

<script>
	import {curl} from 'common/api.js';
		export default {
			data() {
				return {
					statustop:0,
					statuheight:32,
					yzmcode:'获取验证码',
					mobile:'',
					code:'',
					wxcode:'',
					openid:''
				}
			},
			onLoad() {
				
				// 抖音或者小程序
				//#ifdef MP-TOUTIAO || MP-WEIXIN
					let res = uni.getMenuButtonBoundingClientRect();
					console.log('手机状态栏高度',res)
					var infos = uni.getSystemInfoSync();
					var jiaolang=res.top;
					this.statustop=res.top;
					this.statuheight=res.height;
				//#endif
			},
			
			onShow() {
				
				var that=this;
				// #ifdef MP-WEIXIN
				uni.login({
			  	  provider: 'weixin',
			  	   success:res=>{
			  	    console.log();  
					curl('user/getopenid', {'wxcode':res.code}).then((res) => {
						if (ret.code==1) {
							that.openid=res.data	
						}	
					});
			        }
			  	  });
	
				// #endif
			},
			
			methods: {
				gohome(){
					uni.switchTab({
						url:"/pages/index/index"
					})
				},
				submits(){
					
					var that=this;
					var mobile=this.mobile;
					var code=this.code;
					var openid=this.openid;
					
					curl('user/register', {'mobile':mobile,'code':code,openid:''}).then((res) => {
						
						uni.showToast({
							title:res.msg,
							icon:'none'
						})
						
						if (ret.code==1) {
							uni.setStorageSync('tokne',res.data.userinfo.token)
							uni.setStorageSync('userinfo',res.data.userinfo)
							
							uni.switchTab({
								url:"/pages/index/index"
							})
						}	
							
					});
				},
				
				getsms(ret){
					var that=this;
					
					var mobile=this.mobile;
					var yzmcode=this.yzmcode;
					if (yzmcode!='获取验证码') {
						return false;
					}	
					
					curl('Sms/send', {'mobile':mobile,'event':'register'}).then((res) => {
					
						if (res.code==0) {
							uni.showToast({
								title:res.msg,
								icon:'none'
							})
						} else{
							that.setouttime();
						}	
					});
					
					
				},
				
				setouttime(){
					var that=this;
					var s=60;
					var index=setInterval(function(){
						s=s-1;
						
						if	(s<1){
							
							that.yzmcode='获取验证码'
							clearInterval(index)
						}else{
							that.yzmcode=s+' s后获取!'
						}
						
					},1000)
					
				},
				
				goregin(){
					uni.navigateTo({
						url:"/pages/login/register"
					})
				},
				getmobile(res){
					console.log('电话',res);
					this.mobile=res.detail.value;
					
				},
				getcode(res){
					console.log('yzm',res);
					this.code=res.detail.value;
				}
			}
		}
	</script>
	
	<style>
	.page {
	    width: 100%;
	    min-height: 100vh;
	    background-size: 100% 100%;
		background-image: url('https://bantonggou.vipwjf.com/loginbg.png');
	}
	.jiaonang{
		width: 100%;
		height: 64rpx;
		display: flex;align-items: center;
	}
	.jiaonang>text{
		font-size: 30rpx;margin-left: 25rpx;
		font-weight: bold;color: #ffffff;
	}
	.headmenu {
	    width: 640rpx;
	    height: 64rpx;
	    text-align: center;
	    line-height: 64rpx;
	    color: #ffffff;
	    font-weight: bold;
	}
	
	.headbox{
	
	    width: 640rpx;height: 200rpx;margin: auto;
	
	}
	.headbox_1{
	    width: 397rpx;
	    height: 104rpx;
	    font-size: 60rpx;
	    font-weight: bold;
	    color: #FFFFFF;
	    line-height: 96rpx;
	    text-shadow: 2rpx 6rpx 13rpx rgba(10,39,40,0.44);
	}
	.headbox_2{
	    width: 397rpx;
	    height: 44rpx;
	    font-size: 36rpx;
	    font-weight: bold;
	    color: #FFFFFF;
	    line-height: 46rpx;
	    text-shadow: 2rpx 6rpx 13rpx rgba(10,39,40,0.44);
	}
	
	
	.loginbox {
	    width: 690rpx;
	    height: 701rpx;margin: auto;
	    background: #FFFFFF;
	    border-radius: 30rpx;
	}
	
	.loginbox_1{
	    width: 620rpx;height: 180rpx;margin: auto;
	}
	
	.loginbox_1_t{
	    width: 620rpx;
	    height: 40rpx;
	    font-size: 34rpx;
	    font-family: Source Han Sans CN;
	    font-weight: 400;
	    color: #2C2C2C;
	}
	
	.loginbox_2_t{
	    width: 620rpx;
	    height: 60rpx;margin-top: 50rpx;
	    border-bottom: 1px solid #ececec;
	}
	
	
	.loginbox_2_t>input{
	    height: 60rpx;
	    line-height: 50rpx;
	    font-size: 32rpx;
	}
	
	.loginbox_2_b{
	
	    width: 620rpx;
	    height: 60rpx;margin-top: 50rpx;
	    display: flex;align-items: center;
	    border-bottom: 1px solid #ececec;
	}
	
	.loginbox_2_b>input{
	    width: 420rpx;height: 60rpx;
	    line-height: 50rpx;
	    font-size: 32rpx;
	}
	
	.yzm{
	    width: 180rpx;
	    color: #646464;font-size: 26rpx;
	    text-align: right;
	}
	
	.loginbtn {
	    width: 588rpx;
	    height: 100rpx;
	    background: linear-gradient(-90deg, #45CBD3, #6DDDE1);
	    border-radius: 20rpx;
	}
	
	.goreg{
	    width: 100%;height: 100rpx;
	    text-align: center;line-height: 180rpx;
	    font-size:28rpx;
	}
	
	.goreg>text{
	    font-size:28rpx;
	}
	
	.loginbtn{
	    width: 588rpx;
	    height: 100rpx;margin: auto;margin-top: 60rpx;
	    background: linear-gradient(-90deg, #45CBD3, #6DDDE1);
	    border-radius: 20rpx;
	    text-align: center;line-height: 100rpx;
	    color: #ffffff;font-size: 36rpx;font-weight: bold;
	}
	
	
	</style>
	